<template>
	<view class="loader-wrap">
		<view class="loader"></view>
	</view>
</template>

<script>
	export default {
		name: "loading",
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.loader {
		--d: 22px;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		color: #fff;
		box-shadow:
			calc(0.8*var(--d)) calc(0*var(--d)) 0 0,
			calc(0.707*var(--d)) calc(0.707*var(--d)) 0 1px,
			calc(0*var(--d)) calc(1*var(--d)) 0 2px,
			calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
			calc(-1*var(--d)) calc(0*var(--d)) 0 4px,
			calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
			calc(0*var(--d)) calc(-1*var(--d)) 0 6px;
		animation: l27 1s infinite steps(8);
	}

	@keyframes l27 {
		100% {
			transform: rotate(1turn)
		}
	}

	.loader-wrap {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}
</style>